<template>
	<view>
		<uni-popup ref="popup" type="center" background-color="#fff" borderRadius="30rpx 30rpx 0 0">
			<view class="boxs">
				<view class="title-sub flex-between">
					<span>答题卡</span>
					<u-icon name="close-circle-fill" color="#a0a6af" size="22" @click="close"></u-icon>
				</view>
				<view class="content">
					<view class="flex-align-center item-sheet" v-for="items in totalQuestion" :key="items.id">
						<view class="title-type">{{ items.name }}</view>

						<view class="line"></view>
						<view class="sheet-list flex-align-center">
							<!-- i.asInfo.choose_as ? 'greenColor' : '' -->
							<view class="item flex-center" @click="chooseItem(i, idx)" :class="setClass(i)"
								v-for="(i, idx) in items.item" :key="i.id">{{
									idx + 1
								}}
							</view>
						</view>
					</view>
				</view>
				<view class="handIn flex-center" @click="handIn()">交卷</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		seeParse: {
			type: Boolean,
			default: false
		},
		totalQuestion: {
			type: Array,
			default: []
		}
	},
	data() {
		return {


		};
	},
	watch: {
		totalQuestion: {
			handler(val) {
				// console.log(val, 'val');
			},
			deep: true
		}
	},
	methods: {
		// 设置颜色
		setClass(item) {
			if (this.seeParse === true) {
				return item.detailInfo ? item.asInfo.choose_as === item.detailInfo.correct_option ? 'greenColor' :
					'redColor' : 'redColor'
			} else {
				return item.asInfo ? item.asInfo.choose_as ? 'greenColor' : '' : ''
			}
		},
		open() {
			this.$refs.popup.open('bottom')
		},
		close() {
			this.$refs.popup.close()
		},
		// 选择单个题
		chooseItem(item, idx) {
			console.log(item, '选择单个题', idx);
			this.$emit('chooseItem', {
				index: idx,
				id: item.id
			})
			this.close()
		},
		// 交卷
		handIn() {


		}

	}
}
</script>

<style lang="scss">
@function px_2_vw($px) {
	@return #{$px * 100 / 1920}vw;
}

.boxs {
	height: 75vh;
	position: relative;
	padding: 0rpx 35rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 35rpx;
}

.title {
	text-align: center;
	width: px_2_vw(375);
	height: px_2_vw(88);
	font-weight: bold;
	font-size: px_2_vw(40);
	margin: 0 auto;
	// left: 50%;
	// top: 2%;
	// left: 50%;
	// transform: translate(-50%,-50%);
	// position: absolute;
}

.title-sub {
	color: #a0a6af;
	font-size: px_2_vw(28);
	position: absolute;
	top: 30rpx;
	left: 35rpx;
	width: 97%;
	background: #fff;

	image {
		margin-right: 10rpx;
		width: px_2_vw(30);
		height: px_2_vw(30);
	}
}

.content {
	overflow-y: auto;
	height: calc(75vh - 150rpx);
	background: #fff;
	// flex: 1;
	margin-top: 52rpx;
	border-radius: 41rpx;
	padding: 26rpx 0rpx;

	.item-sheet {
		border-bottom: 1rpx dashed #a0a6af;
		padding: 20rpx 0;
		font-size: px_2_vw(24);

	}

	.line {
		height: px_2_vw(60);
		width: 1rpx;
		border-left: 1rpx solid #a0a6af;
		margin: 0 20rpx;
	}

	.title-type {
		width: px_2_vw(160);
	}

	.sheet-list {

		.item {
			width: px_2_vw(60);
			height: px_2_vw(60);
			border-radius: 50%;
			border: 1rpx solid #a0a6af;
			color: #a0a6af;
			margin-right: 30rpx;
		}
	}

}

.handIn {
	width: px_2_vw(260);
	height: px_2_vw(60);
	border-radius: 50rpx;
	color: #fff;
	background: #d9db58;
	margin: 0 auto;
	font-weight: 600;
}

.greenColor {
	background: #0F9F04;
	border-color: #0F9F04 !important;
	color: #fff !important;
}

.redColor {
	background: #D11717;
	border-color: #D11717 !important;
	color: #fff !important;
}
</style>